.pie-chart__placeholder,
.pie-chart {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.pie-chart__placeholder-drawing,
.pie-chart__chart-drawing {
	max-width: 40%;
}
.pie-chart__placeholder-title,
.pie-chart__title {
	margin-top: 15px;
	font-size: $font-body;
	font-weight: 600;
}

.pie-chart__chart-section-0,
.pie-chart__legend-sample-0 {
	fill: var( --color-primary-dark );
}

.pie-chart__chart-section-1,
.pie-chart__legend-sample-1 {
	fill: var( --color-accent );
}

.pie-chart__chart-section-2,
.pie-chart__legend-sample-2 {
	fill: var( --color-primary-light );
}

.pie-chart__chart-drawing-empty {
	fill: var( --color-neutral-light );
}

.pie-chart__legend {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	.legend-item:not( :first-child ) {
		margin-top: 20px;
	}
}

.pie-chart__placeholder-legend {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	.legend-item__placeholder:not( :first-child ) {
		margin-top: 20px;
	}
}

.pie-chart__placeholder-legend-drawing {
	height: 12px;
	width: 12px;
	margin-right: 7px;
}

.pie-chart__placeholder-title {
	@include placeholder();
}

.pie-chart__placeholder-drawing-element {
	@include placeholder();
	fill: var( --color-neutral-0 );
}
